<template>
  <h3 v-if="title">{{ title }}</h3>
  <div class="flex-yc item">
    <label>{{ label }}</label>
    <div class="flex-yc">
      <slot v-if="slot"></slot>
      <template v-else>
        <input
          ref="inputRef"
          :placeholder="placeholder"
          :value="value"
          :readonly="inputReadonly"
        />
        <el-link :type="handleType" v-if="!slot" @click="onInput">
          {{ handleTxt }}
        </el-link>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElInput } from 'element-plus'

withDefaults(
  defineProps<{
    slot?: boolean
    title?: string
    label: string
    placeholder?: string
    value?: string
    handleTxt?: string
    handleType?: string
  }>(),
  {
    slot: false,
    handleTxt: '修改',
    handleType: 'primary',
  },
)

const inputReadonly = ref(true)
// const inputRef = ref<InstanceType<typeof ElInput>>()
const inputRef = ref<HTMLInputElement>()

const onInput = () => {
  inputReadonly.value = false
  inputRef.value.focus()
}
</script>

<style scoped lang="scss">
h3 {
  padding: 0 18px;
  margin-top: 16px;
  margin-bottom: -18px;
  font-size: 12px;
  color: #808080;
}

.flex-yc.item {
  padding: 0 18px;

  label {
    margin-right: 16px;
    font-size: 14px;
    color: #4e5969;
  }

  > .flex-yc {
    flex: 1;
    padding: 24px 0;
    border-bottom: 1px solid $borderCol;

    input {
      width: 100%;
      font-size: 14px;
      color: #1d2129;
      border: none;
    }

    .el-link {
      flex-shrink: 0;
    }
  }
}
</style>
